<template>

	<view class="main">

		<u-swiper class="ysa" height="350" style="position: fixed;top: 0;" :list="CarouselListData"></u-swiper>
		<view class="center" style="position: fixed;top:80rpx;width: 100%;">
			爱牙牙口腔员工端
		</view>

		<view class="info">
			<!-- <u-search bgColor="#fff" @focus="toUrl('/pages/index/searchadd')" shape="square" placeholder="搜索内容" @custom="onSearch" @search="onSearch" /> -->


			<view class="row space-between" style="margin-top: 32rpx;">
				<view @click="toUrl('/pages/index/yygh')" class="topa">
					<image class="abc" src="/static/images/abc.png"></image>
					<view class="zzyy">新建预约</view>
					<view class="xsyy">患者预约记录</view>
				</view>

				<view class="topa">
					<image class="abc" src="/static/images/bbc.png"></image>
					<view class="zzyy" @click="toUrl('/pages/employee/clockin')">考勤打卡</view>
					<view class="xsyy" @click="toUrl('/pages/employee/full-attendance')">查看考勤数据</view>
				</view>
			</view>

			<view class="row space-between itemaad center">

				<view class="column_c" @click="toUrl('/pages/scheduling/personage')">
					<image class="zspb" src="/static/images/zspb.png"></image>
					<view class="zsbpwz">诊所排班</view>
				</view>

				<view class="column_c" @click="toUrl('/pages/followup/project')">
					<image class="zspb" src="/static/images/sfjh.png"></image>
					<view class="zsbpwz">随访计划</view>
				</view>

				<view class="column_c" @click="toUrl('/pages/commonality/yybb')">
					<image class="zspb" src="/static/images/yybb.png"></image>
					<view class="zsbpwz">运营报表</view>
				</view>

				<view class="column_c" @click="toUrl('/pages/commonality/jhsp')">
					<image class="zspb" src="/static/images/jhsp.png"></image>
					<view class="zsbpwz">教患视频</view>
				</view>

			</view>



		</view>
	</view>

</template>

<script>
	import api_index from '@/api/index.js';

	export default {
		async onLoad(option) {
			console.log(uni.$u.config.v);
		},
		async onShow() {
			//获取轮播列表
			this.getCarouselListFuc();
		},
		data() {
			return {
				CarouselListData: [], //轮图图
			};
		},
		methods: {
			toUrl(url) {
				this.navTo(url);
			},
			//获取轮播列表
			async getCarouselListFuc() {
				const res = await api_index.getCarouselList();
				if (res.code == 1) {
					var list = res.data.list
					this.CarouselListData = list.map(list => list.image);
				} else {
					this.$util.msg(res.message);
					return;
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.info {
		width: 100%;
		min-height: 1000rpx;
		background: #FAFAFA !important;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: absolute;
		top: 540rpx;
		padding: 32rpx 46rpx 46rpx 46rpx;
	}

	.abc {
		position: absolute;
		width: 300rpx;
		height: 186rpx;
		border-radius: 10rpx;
		bottom: 0;
		left: 10rpx;

	}


	.zspb {
		width: 80rpx;
		height: 80rpx;
	}

	.zsbpwz {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
	}

	.itemaad {
		width: 654rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 20rpx;
		padding: 30rpx 48rpx;
	}

	.tit {
		margin: 48rpx 0;
	}

	.shuxian {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.title {

		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);

	}

	.ysd {
		width: 335rpx;
		height: 160rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.yse {
		width: 335rpx;
		height: 160rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}




	.ysf {
		width: 340rpx;
		height: 378rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.ysg {
		width: 340rpx;
		height: 158rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 10rpx;
	}

	.ysh {
		width: 340rpx;
		height: 178rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.ysi {
		width: 340rpx;
		height: 178rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 6rpx;
	}

	.ysj {
		width: 340rpx;
		height: 178rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 6rpx;
	}

	.zzyy {


		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);



		position: absolute;
		top: 24rpx;
		left: 30rpx;
	}

	.xsyy {

		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);



		position: absolute;
		top: 80rpx;
		left: 30rpx;

	}

	.ljyy {
		width: 144rpx;
		height: 44rpx;
		background: #27CCBB;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		position: absolute;
		top: 160rpx;
		left: 30rpx;
	}

	.topa {
		position: relative;

		width: 320rpx;
		height: 312rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;


	}

	.pszx {
		width: 350rpx;
		height: 128rpx;
		background: #F4F6FC;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx;
	}

	.pszxtitle {
		font-weight: 400;
		font-size: 28rpx;
		color: #287FFF;
		position: relative;
	}

	.mfwd {
		font-weight: 400;
		font-size: 20rpx;
		color: #287FFF;
	}

	.ysb {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		top: 50rpx;
		right: 50rpx;

	}


	.ysc {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		top: 50rpx;
		right: 50rpx;
	}

	.pszxb {
		width: 350rpx;
		height: 128rpx;
		background: #FDF7ED;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx;
		margin-top: 18rpx;
		position: relative;
	}

	.pszxtitleb {
		font-weight: 400;
		font-size: 28rpx;
		color: #FF8228;
		position: relative;
	}

	.mfwdb {
		font-weight: 400;
		font-size: 20rpx;
		color: #FF8228;
	}

	.ysbb {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		top: 0rpx;
		right: 20rpx;

	}
</style>